<template>
  <div class="info-dialog">
    <el-dialog
      :visible.sync="visible"
      :title="title"
      :modal-append-to-body="true"
      :append-to-body="true"
      :destroy-on-close="false"
      :close-on-click-modal="false"
      :modal="true"
      top="10vh"
       width="800px"
      @closed="closed"
    >
      <el-form ref="customForms" :model="customForm" :rules="rules">
        <el-form-item label-width="80px" label="名称" prop="name">
          <el-input v-model="customForm.name" placeholder="请输入名称" autocomplete="off" />
        </el-form-item>
        <el-form-item label-width="80px" label="标识" prop="code">
          <el-input v-model="customForm.code" placeholder="请输入标识" autocomplete="off" />
        </el-form-item>
      </el-form>

      <div v-if="customForm.id!=''">

      <el-row :gutter="10" style="margin-bottom: 0.3125rem;">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAddPoi"
            :loading="buttonLoading"
          >POI</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAddPath"
            :loading="buttonLoading"
          >路径</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAddRange"
            :loading="buttonLoading"
          >区域</el-button>
        </el-col>
      </el-row>

      <el-table
        :data="tableData"
        border
        empty-text="暂无数据."
        border
        style="width: 100%">

       <el-table-column prop="sort" label="序号" width="100">
          <template slot-scope="scope">
            <el-input v-if="isEditMode(scope.row)" v-model="scope.row.sort" />
            <span v-else>{{ scope.row.sort }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="name"
          label="名称"
          >
        </el-table-column>

        <el-table-column
          prop="code"
          label="标识"
          >
        </el-table-column>

        <el-table-column prop="type" label="类型" width="80">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type=='POI' " type="primary">POI</el-tag>
            <el-tag v-if="scope.row.type=='PATH' " type="success">路径</el-tag>
            <el-tag v-if="scope.row.type=='RANGE' " type="warning">区域</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="left" >
         <template slot-scope="scope">
           <el-button icon="el-icon-edit" type="text" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
           <el-button
             v-if="
             scope.row.type=='POI'
             "
             type="text"
             icon="el-icon-view"
             size="small"
             @click="handleSettingStyle(scope.row)"
           >样式</el-button>

           <el-button type="text" icon="el-icon-delete" size="small" @click="handleDelete(scope.row)">删除
           </el-button>
         </template>
       </el-table-column>

      </el-table>

      </div>


      <span slot="footer" class="dialog-footer">
        <el-button @click="closed">取 消</el-button>
        <el-button type="primary" :loading="buttonLoading" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>

    <SelectTableDialog
      v-if="selectTableDialog.visible"
      :dialog-visible="selectTableDialog.visible"
      :dialog-data="selectTableDialog.data"
      @refresh="load"
      @closed="closeAddPoi"
    />

    <PoiInfoDialog
      v-if="poiInfoDialog.visible"
      :dialog-visible="poiInfoDialog.visible"
      :dialog-data="poiInfoDialog.data"
      @closed="closePoiInfoDialog"
      @refresh="load"
    />

    <PathInfoDialog
      v-if="pathInfoDialog.visible"
      :dialog-visible="pathInfoDialog.visible"
      :dialog-data="pathInfoDialog.data"
      @closed="closePathInfoDialog"
      @refresh="load"
    />

    <RangeInfoDialog
      v-if="rangeInfoDialog.visible"
      :dialog-visible="rangeInfoDialog.visible"
      :dialog-data="rangeInfoDialog.data"
      @closed="closeRangeInfoDialog"
      @refresh="load"
    />

    <PoiGroupStyleDialog
      v-if="poiGroupStyleDialogVisible"
      :dialog-visible="poiGroupStyleDialogVisible"
      :dialog-data="poiGroupStyleDialogData"
      @refresh="load"
      @closed="styleDialogVisibleClose"
    />

  </div>
</template>
<script>

import {
  saveSceneSrcCustom,
  deleteSceneSrcCustomItem,
  findSceneSrcCustomItemList,
} from '@/api/51world/sceneSrcCustom.js'

import {
  getScenePoiById
} from '@/api/51world/sceneSrcPoi.js'

import SelectTableDialog from './SelectTableDialog.vue'

import PoiInfoDialog from './PoiInfoDialog.vue'
import RangeInfoDialog from './RangeInfoDialog.vue'
import PathInfoDialog from './PathInfoDialog.vue'
import PoiGroupStyleDialog from '../PoiStyleDialog.vue'

import {
  isOk
} from '@/utils/request'
export default {
  name: 'CustomInfoDialog',
  components: { SelectTableDialog,RangeInfoDialog,PathInfoDialog,PoiInfoDialog,PoiGroupStyleDialog },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dialogData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      visible: false,
      title: '',
      buttonLoading: false,
      customForm: {
        id: '',
        sceneId:'',
        srcId:'',
        name: '',
        code:'',
      },
      tableData: [],
      selectTableDialog:{
        visible:false,
        data:{}
      },
      poiInfoDialog:{
        visible:false,
        data:{}
      },
      pathInfoDialog:{
        visible:false,
        data:{}
      },
      rangeInfoDialog:{
        visible:false,
        data:{}
      },
      poiGroupStyleDialogVisible:false,
      poiGroupStyleDialogData:{},
      rules: {
        name: [{
          required: true,
          message: '请输入标签',
          trigger: 'blur'
        },
        {
          min: 2,
          max: 50,
          message: '长度在 2 到 50 个字符',
          trigger: 'blur'
        }
        ],
      }
    }
  },
  computed: {

  },
  watch: {
    dialogVisible: {
      handler: function(value) {
        this.visible = value
      },
      immediate: true,
      deep: false
    },
    dialogData: {
      handler: function(nValue) {
        if (nValue) {
          if(nValue.id){
             this.title = '编辑'
          }else{
            this.title = '新增'
          }
          this.customForm.id = nValue.id || ''
          this.customForm.sceneId = nValue.sceneId || ''
          this.customForm.srcId = nValue.srcId || ''
          this.customForm.name = nValue.name || ''
          this.customForm.code = nValue.code || ''
        }
        else{
           this.title = '新增'
        }
      },
      immediate: true,
      deep: false
    }
  },
  mounted: function() {
  },
  created() {
    this.load();
  },
  methods: {
    isEditMode(row) {
      return row.meta.isEditMode
    },
    setEditMode(row, status) {
      row.meta.isEditMode = status
      console.log(row.meta.isEditMode)
    },
    load(){
      if(!this.customForm.id){
        this.tableData = []
        return;
      }
      this.buttonLoading=true
      findSceneSrcCustomItemList({
        customId:this.customForm.id
      }).then(rsp => {
        if(200==rsp.code){
          const _data = rsp.data
          this.tableData = _data
          this.tableData.forEach(item => {
            item.meta = {
              isEditMode: false,
            }
          })
          this.buttonLoading = false
        }
      }).catch(err => {
        console.log(err);
      })
      .finally(() => {
        this.buttonLoading = false
      })
    },
    //添加POI
    handleAddPoi(){
      this.poiInfoDialog.visible=true
      this.poiInfoDialog.data={
        srcId:this.customForm.id,
        sceneId:this.customForm.sceneId,
        from:'1'
      }
    },
    handleEdit(row){
      if(row.type=='POI'){
        this.poiInfoDialog.visible=true
        this.poiInfoDialog.data=row
      }
      else if(row.type=='PATH'){
        this.pathInfoDialog.visible=true
        this.pathInfoDialog.data=row
      }
      else if(row.type=='RANGE'){
        this.rangeInfoDialog.visible=true
        this.rangeInfoDialog.data=row
      }

    },
    closePoiInfoDialog(e){
      this.poiInfoDialog.visible=e
      this.poiInfoDialog.data={}
      this.load()
    },
    //添加Path
    handleAddPath(){
      this.pathInfoDialog.visible=true
      this.pathInfoDialog.data={
        srcId:this.customForm.id,
        sceneId:this.customForm.sceneId,
        from:'1'
      }
    },
    closePathInfoDialog(e){
      this.pathInfoDialog.visible=e
      this.pathInfoDialog.data={}
      this.load()
    },
    //添加Range
    handleAddRange(){
      this.rangeInfoDialog.visible=true
      this.rangeInfoDialog.data={
        srcId:this.customForm.id,
        sceneId:this.customForm.sceneId,
        from:'1'
      }
    },
    closeRangeInfoDialog(e){
      this.rangeInfoDialog.visible=e
      this.rangeInfoDialog.data={}
      this.load()
    },
    handleSettingStyle(row){
      this.buttonLoading = true
      getScenePoiById({
        id:row.id
      }).then(rsp => {
        if (isOk(rsp)) {
          const nValue=rsp.data;
          this.poiGroupStyleDialogVisible=true
          this.poiGroupStyleDialogData=nValue
          this.buttonLoading = false
        }
      })
    },
    styleDialogVisibleClose(e){
      this.poiGroupStyleDialogVisible = e
      this.poiGroupStyleDialogData={}
    },
    submitForm: function() {
      this.$refs.customForms.validate((valid) => {
        if (valid) {
          this.buttonLoading = true
          saveSceneSrcCustom(this.customForm).then(rsp => {
            if (isOk(rsp)) {
                this.$message({
                  type: 'success',
                  message: '成功!'
                })
              this.buttonLoading = false
              this.closed()
            }
          })
        }
      })
    },
    saveCustomItem(){

    },
    handleDelete: function(data) {
      this.$confirm('确认删除【' + data.name + '】吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        deleteSceneSrcCustomItem({
          id: data.id
        }).then(response => {
          this.$message({
            message: '删除成功',
            type: 'success',
            duration: 500
          })
          this.load()
        }).catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false
        })
      })
    },
    closed: function() {
      this.$emit('closed', false)
    }
  }
}
</script>

<style lang="scss">
  .info-dialog {

  }
</style>
